<template>
    <div>
        <el-dialog :title="isAdd ? '添加菜单' : '修改菜单'" :model-value="isShow" center :before-close="handleClose">
            <el-form :model="menuInfo" :rules="rules" label-width="100px" class="demo-ruleForm" ref="ruleFormRef">
                <el-form-item label="菜单名称" prop="title">
                    <el-input v-model="menuInfo.title"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="pid">
                    <el-select v-model="menuInfo.pid" placeholder="请选择上级菜单" @change="changeType">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in menuList" :key="item.id" :label="item.title" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型">
                    <el-radio v-model="menuInfo.type" :label="1" disabled>目录</el-radio>
                    <el-radio v-model="menuInfo.type" :label="2" disabled>菜单</el-radio>
                </el-form-item>
                <el-form-item label="菜单地址" v-if="menuInfo.type == 2">
                    <el-input v-model="menuInfo.url"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" v-else>
                    <el-input v-model="menuInfo.icon"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="menuInfo.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="offCheck(ruleFormRef)">取 消</el-button>
                    <el-button type="primary" @click="addMenu(ruleFormRef, isAdd)">确 定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
// 引入接口地址
import { menuAdd, menuEdit, menuLook } from "../../request/api"
import { reactive, ref, defineEmits, defineExpose, computed } from "vue"
//引入了数据类型规则
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useStore } from "vuex"
let store = useStore()
// 接受父组件的参数
defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
const menuInfo = ref({
    pid: 0,
    title: "",
    icon: "",
    type: 1,
    url: "",
    status: 1,
})
//创建一个ref
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
    title: [
        { required: true, message: '请输入菜单名称', trigger: 'blur' },
        { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
    ],
    pid: [
        { required: true, message: '请输入上级菜单', trigger: 'blur' },
    ]
})
//去定义 子父组件通信方法 创建自定义事件名称
let emit = defineEmits(["offCheck"])
//点击取消
const offCheck = (formEl: FormInstance | undefined) => {
    // 点击重置
    if (!formEl) return
    formEl.resetFields()
    // 子传父
    emit("offCheck", false)
    menuInfo.value = {
        pid: 0,
        title: "",
        icon: "",
        type: 1,
        url: "",
        status: 1,
    }
}
// 点击确定
const addMenu = async (formEl: FormInstance | undefined, isAdd: boolean) => {
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (isAdd) {
                //调用添加接口
                menuAdd(menuInfo.value).then((res: any) => {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg,
                    })
                    offCheck(ruleFormRef.value)
                    store.dispatch("menu/menuList_Action")
                })
            } else {
                // 调用编辑接口
                menuEdit(menuInfo.value).then((res: any) => {
                    ElMessage({
                        type: 'success',
                        message: res.data.msg,
                    })
                    offCheck(ruleFormRef.value)
                    store.dispatch("menu/menuList_Action")
                })
            }
        }
    });
};

// 编辑数据回显
const lookUp = (id: number) => {
    menuLook({ id }).then((res: any) => {
        menuInfo.value = { ...res.data.list, id }
    })
}
defineExpose({
    lookUp
})
// 菜单数据
const menuList = computed(() =>
    store.getters["menu/getMenuList"]
)
// 改变菜单类型的状态与菜单列表一致
const changeType = (e: any) => {
    menuInfo.value.type = e == 0 ? 1 : 2
}
// 点击X关闭
const handleClose = (done: () => void) => {
    done()
    offCheck(ruleFormRef.value)
}

</script>

<style scoped>
</style>
